<template>
  <el-dialog :title="{add:'新增题库测试',edit:'编辑题库测试'}[mode]" :visible.sync="isShow" fullscreen @close="closeEvent">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="学科" prop="subject">
        <el-select v-model="form.subject" placeholder="请选择">
          <el-option
            v-for="item in questionData.subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="阶段" prop="step">
        <el-select v-model="form.step">
          <el-option
            v-for="item in questionData.step"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterprise">
        <el-select v-model="form.enterprise">
          <el-option
            v-for="item in questionData.enterpriseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-cascader
          v-model="form.city"
          size="large"
          :options="options"
          :props="{value:'label'}"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="题型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio
            v-for="item in questionData.type"
            :key="item.id"
            :label="item.id"
          >{{ item.value }}</el-radio>
        </el-radio-group>

      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-radio-group v-model="form.difficulty">
          <el-radio
            v-for="item in questionData.difficulty"
            :key="item.id"
            :label="item.id"
          >{{ item.value }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <hr>
      <el-form-item label="试题标题" prop="title">
        <quillEditor v-model="form.title" @change="contentChange" />
      </el-form-item>
      <!-- 单选 -->
      <el-form-item v-if="form.type==='1'" label="单选" prop="single_select_answer">
        <div v-for="item in form.select_options" :key="item.label" class="item">
          <el-radio v-model="form.single_select_answer" :label="item.label" />
          <el-input v-model="item.text" /><UploadImg v-model="item.image" />
        </div>
      </el-form-item>
      <!-- 多选 -->
      <el-form-item v-else-if="form.type==='2'" label="多选" prop="multiple_select_answer">
        <div v-for="item in form.select_options" :key="item.label" class="item">
          <el-checkbox v-model="form.multiple_select_answer" :label="item.label" />
          <el-input v-model="item.text" /><UploadImg v-model="item.image" />
        </div>
      </el-form-item>
      <!-- 简答 -->
      <el-form-item v-if="form.type==='3'" label="简答" prop="short_answer">
        <el-input v-model="form.short_answer" type="textarea" />
      </el-form-item>
      <el-form-item label="解析视频">
        <UploadVideo v-model="form.video" type="video" :form="form" />
        <span>只能上传视频格式文件</span>
      </el-form-item>
      <el-form-item label="答案解析" prop="answer_analyze">
        <quillEditor v-model="form.answer_analyze" @change="contentChange" />
      </el-form-item>
      <el-form-item label="试题备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align:center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="isShow = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
// 导入富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 导入城市列表
import { regionData } from 'element-china-area-data'
import { questionAdd, questionEdit } from '@/api/question'
// 导入图片上传框
// import Upload from './upload.vue'
import UploadImg from '@/components/UploadImg/'
import UploadVideo from '@/components/UploadVideo/'
export default {
  components: {
    quillEditor,
    UploadImg,
    UploadVideo
  },
  props: {
    questionData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      mode: 'add',
      options: regionData,
      selectedOptions: [],
      isShow: false,
      form: {
        title: '', //	是	string	标题
        subject: '', //	是	int	学科id标识
        step: '', //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', //	是	int	企业id标识
        city: [], //	是	array	[省、市、区县]
        type: '1', //	是	string	题型 1单选 、2多选 、3简答
        difficulty: '', //	是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', //	是	string	单选题答案
        multiple_select_answer: '', //	是	array	多选题答案
        short_answer: '', //	是	string	简答题答案
        video: '',
        answer_analyze: '', //	是	string	答案解析
        remark: '', //	是	string	答案备注
        select_options: [{ 'label': 'A' },
          {
            'label': 'B'
          },
          {
            'label': 'C'
          },
          {
            'label': 'D'
          }] //	是	array
      },
      rules: {
        title: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	标题
        subject: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	学科id标识
        step: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	企业id标识
        city: [{ required: true, message: '必填', trigger: 'change' }], //	是	array	[省、市、区县]
        type: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	题型 1单选 、2多选 、3简答
        difficulty: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	单选题答案
        multiple_select_answer: [{ required: true, message: '必填', trigger: 'change' }], //	是	array	多选题答案
        short_answer: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	简答题
        answer_analyze: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	答案解析
        remark: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	答案备注
        select_options: [{ required: true, message: '必填', trigger: 'change' }] //	是	array
      }

    }
  },

  methods: {
    // 获取城市列表
    handleChange(value) {
      this.form.city = value
      console.log(value)
    },
    // 富文本校验
    contentChange() {
      this.$refs.form.validateField(['title', 'answer_analyze'], (errorMessage) => {
        if (errorMessage) {
          console.log('验证失败')
        } else {
          console.log('验证成功')
        }
      })
    },
    // 确认提交
    async submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          if (this.mode === 'add') {
            const res = await questionAdd(this.form)
            console.log(res)
            this.$message.success('新增成功')
          } else if (this.mode === 'edit') {
            const res = await questionEdit(this.form)
            console.log(res)
            this.$message.success('编辑成功')
          }
          this.isShow = false
          this.$emit('getData')
        }
      })
    },
    // 关闭弹窗
    closeEvent() {
      this.$refs.form.resetFields()
      this.form = {
        title: '', //	是	string	标题
        subject: '', //	是	int	学科id标识
        step: '', //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', //	是	int	企业id标识
        city: [], //	是	array	[省、市、区县]
        type: '1', //	是	string	题型 1单选 、2多选 、3简答
        difficulty: '', //	是	int	题目难度 1简单 、2一般 、3困难
        single_select_answer: '', //	是	string	单选题答案
        multiple_select_answer: [], //	是	array	多选题答案
        short_answer: '', //	是	string	简答题答案
        answer_analyze: '', //	是	string	答案解析
        video: '',
        remark: '', //	是	string	答案备注
        select_options: [{ 'label': 'A' },
          {
            'label': 'B'
          },
          {
            'label': 'C'
          },
          {
            'label': 'D'
          }] //	是	array
      }
    }

  }
}
</script>

<style lang='scss' scoped>

  .item{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  ::v-deep .el-dialog__header{
    background:linear-gradient(90deg,#01c4fa,#1294fa);

  }
   ::v-deep .el-dialog__title{
color:#fff
   }

     ::v-deep .el-dialog__close{
      color:#fff
     }

</style>
